import React, { useState, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { SorterResult } from 'antd/es/table/interface';
import { ORDER_STATUS } from '@/common/constants';
import { history } from 'umi';
import { Tag } from 'antd';
import { queryRule } from './service';

const TableList: React.FC<{}> = () => {
  const [sorter, setSorter] = useState<string>('');
  const [stepFormValues, setStepFormValues] = useState({});
  const actionRef = useRef<ActionType>();

  console.log(setStepFormValues);

  const columns: ProColumns<any>[] = [
    // {
    //   title: '姓名',
    //   dataIndex: 'address.name',
    //   rules: [
    //     {
    //       required: true,
    //       message: '姓名为必填项',
    //     },
    //   ],
    //   initialValue: stepFormValues?.address?.name,
    //   render: (_, record) => record?.address?.name,
    // },
    // {
    //   title: '手机号',
    //   dataIndex: 'address.mobile',
    //   rules: [
    //     {
    //       required: true,
    //       message: '手机号为必填项',
    //     },
    //   ],
    //   initialValue: stepFormValues?.address?.mobile,
    //   render: (_, record) => record?.address?.mobile,
    // },
    {
      title: '平台订单号',
      dataIndex: 'order_id',
      render: (v) => v || '-',
    },
    {
      title: '金额（元）',
      dataIndex: 'all_price',
      hideInSearch: true,
      initialValue: stepFormValues?.all_price,
      render: (v) => v / 100 || '-',
    },
    {
      title: '微信支付订单号',
      dataIndex: 'transaction_id',
      initialValue: stepFormValues.transaction_id,
      render: (v) => v || '-',
    },
    {
      title: '支付时间',
      dataIndex: 'pay_time',
      hideInSearch: true,
      render: (val) => val || '-',
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueEnum: {
        'WAIT_PAY': { text: '未付款', status: 'WAIT_PAY' },
        'PAY': { text: '已付款', status: 'PAY' },
        'READY': { text: '配货中', status: 'READY' },
        'SENDING': { text: '正在配送', status: 'SENDING' },
        'DONE': { text: '已完成', status: 'DONE' },
        'CANCEL': { text: '已取消', status: 'CANCEL' },
      },
      render: (_, record) => (
        <Tag color={ORDER_STATUS[record.status]?.color}>{ORDER_STATUS[record.status]?.txt}</Tag>
      ),
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <a
          onClick={() => {
            history.push({
              pathname: `/order/detail/${record.id}`,
            });
          }}
        >
          订单处理
        </a>
      ),
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable<any>
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="id"
        onChange={(_, _filter, _sorter) => {
          const sorterResult = _sorter as SorterResult<any>;
          if (sorterResult.field) {
            setSorter(`${sorterResult.field}_${sorterResult.order}`);
          }
        }}
        params={{}}
        toolBarRender={() => []}
        request={async (params) => {
          const ans = {
            ...params,
            page: params?.current,
          };
          delete ans?.current;
          delete ans?._timestamp;
          const { data } = await queryRule(ans);
          data.data = data.list;
          data.total = data.total;
          return data;
        }}
        columns={columns}
        rowSelection={{}}
      />
    </PageHeaderWrapper>
  );
};

export default TableList;
